<template>
  <!-- 搜索工作栏 -->
  <ContentWrap>
    <el-form
      class="-mb-15px"
      :model="queryParams"
      ref="queryFormRef"
      :inline="true"
      label-width="120px"
    >
      <template v-for="(item, index) in visibleSearchConfig" :key="index">
        <el-form-item :prop="item.prop">
          <component
            :is="
              item.type === 'dateRange'
                ? 'el-date-picker'
                : item.type === 'select'
                ? 'el-select'
                : 'el-input'
            "
            v-model="queryParams[item.prop]"
            :placeholder="item.placeholder"
            :start-placeholder="item.startPlaceholder"
            :end-placeholder="item.endPlaceholder"
            :type="item.type === 'dateRange' ? 'daterange' : 'text'"
            :value-format="item.type === 'dateRange' ? 'YYYY-MM-DD HH:mm:ss' : undefined"
            :default-time="
              item.type === 'dateRange'
                ? [new Date('1 00:00:00'), new Date('1 23:59:59')]
                : undefined
            "
            clearable
            @keyup.enter="handleQuery"
            class="!w-240px"
          >
            <template v-if="item.type === 'select'">
              <el-option
                v-for="opt in item.options"
                :key="opt.value"
                :label="opt.label"
                :value="opt.value"
              />
            </template>
          </component>
        </el-form-item>
      </template>

      <el-form-item>
        <el-button @click="handleQuery"> <Icon icon="ep:search" class="mr-5px" /> 搜索 </el-button>
        <el-button @click="resetQuery"> <Icon icon="ep:refresh" class="mr-5px" /> 重置 </el-button>
      </el-form-item>
      <div class="flex justify-center w-full">
        <el-button type="text" @click="toggleExpand" class="expand-toggle-button">
          {{ isExpanded ? '收起' : '展开' }}
          <Icon :icon="isExpanded ? 'ep:arrow-up' : 'ep:arrow-down'" class="ml-5px" />
        </el-button>
      </div>
    </el-form>
  </ContentWrap>

  <!-- 列表 -->
  <ContentWrap>
    <el-row :gutter="10" style="margin-bottom: 16px">
      <el-col :span="12">
        <div style="text-align: left">
          <el-button
            type="default"
            plain
            @click="handleExport"
            :loading="exportLoading"
            v-hasPermi="['system:tenant:export']"
          >
            导出
          </el-button>
        </div>
      </el-col>
      <el-col :span="12">
        <div style="text-align: right">
          <el-button type="default" @click="btnLie" plain>
            <img key="1" alt="" width="25px" height="20px" src="@/assets/svgs/column.svg" />
            列表字段
          </el-button>
        </div>
      </el-col>
    </el-row>
    <el-table
      v-loading="loading"
      :data="list"
      show-summary
      :summary-method="getSummaries"
      :summary-props="{
        columns: [
          'currentStock',
          'totalSalesAmount',
          'totalCost',
          'occupiedStock',
          'availableStock'
        ]
      }"
    >
      <el-table-column
        label="物料编号"
        sortable
        align="center"
        v-if="visibleColumns.materialId"
        prop="materialId"
      />
      <el-table-column
        label="物料图片"
        align="center"
        v-if="visibleColumns.materialImage"
        prop="materialImage"
      >
        <template #default="scope">
          <el-image
            style="width: 70px; height: 70px"
            :src="scope.row.materialImage"
            :preview-src-list="[scope.row.materialImage]"
            fit="cover"
            preview-teleported
            hide-on-click-modal
          />
        </template>
      </el-table-column>
      <el-table-column
        label="物料名称"
        align="center"
        v-if="visibleColumns.materialName"
        prop="materialName"
      />
      <el-table-column
        label="物料分类"
        align="center"
        v-if="visibleColumns.materialCategory"
        prop="materialCategory"
      />
      <el-table-column
        label="规格"
        align="center"
        v-if="visibleColumns.specification"
        prop="specification"
      />
      <el-table-column label="类别" align="center" v-if="visibleColumns.category" prop="category" />
      <el-table-column
        label="物料使用状态"
        align="center"
        v-if="visibleColumns.materialStatus"
        prop="materialStatus"
      >
        <template #default="scope">
          <dict-tag :type="DICT_TYPE.MATERIAL_STATUS" :value="scope.row.materialStatus" />
        </template>
      </el-table-column>
      <el-table-column
        label="销售单价(基本单位)"
        align="center"
        v-if="visibleColumns.salePrice"
        prop="salePrice"
      />

      <el-table-column
        label="成本单价(基本单位)"
        align="center"
        v-if="visibleColumns.costPrice"
        prop="costPrice"
      />

      <el-table-column
        label="当前库存(基本单位)"
        align="center"
        prop="currentStock"
        sortable
      />
      <el-table-column
        label="合计销售总额"
        align="center"
        v-if="visibleColumns.totalSalesAmount"
        prop="totalSalesAmount"
      />
      <el-table-column
        label="成本总额"
        align="center"
        v-if="visibleColumns.totalCost"
        prop="totalCost"
      />
      <el-table-column
        label="当前占用库存(基本单位)"
        align="center"
        prop="occupiedStock"
        v-if="visibleColumns.occupiedStock"
      />
      <el-table-column
        label="当前可用库存(基本单位)"
        align="center"
        prop="availableStock"
        v-if="visibleColumns.availableStock"
      />

      <el-table-column
        label="单位(辅助单位)"
        align="center"
        v-if="visibleColumns.unit"
        prop="unit"
      />
      <el-table-column
        label="当前库存(辅助单位)"
        align="center"
         v-if="visibleColumns.currentStock"
        prop="auxiliaryCurrentStock"
      />
      <el-table-column
        label="占用库存(辅助单位)"
        align="center"
          v-if="visibleColumns.occupyStock"
        prop="occupyStock"
      />
      <el-table-column
        label="可用库存(辅助单位)"
        v-if="visibleColumns.availableStock"
        align="center"
        prop="availableStock"
      />
      <el-table-column label="副单位" align="center" v-if="visibleColumns.subUnit" prop="subUnit" width="100" />
      <el-table-column label="副单位数量" align="center" v-if="visibleColumns.subUnitQuantity"  prop="subUnitQuantity" width="120" />
      <el-table-column
        label="销售单价(辅助单位)"
        align="center"
        prop="auxiliarySalePrice"
        v-if="visibleColumns.auxiliarySalePrice"
      >
        <template #default="scope">
          ￥{{ parseFloat(scope.row.auxiliarySalePrice / 100).toFixed(2) }}
        </template>
      </el-table-column>
      <el-table-column
        label="成本单价(辅助单位)"
        align="center"
        prop="auxiliaryCostPrice"
        v-if="visibleColumns.auxiliaryCostPrice"
      >
        <template #default="scope">
          ￥{{ parseFloat(scope.row.auxiliaryCostPrice / 100).toFixed(2) }}
        </template>
      </el-table-column>
      <el-table-column label="批号" align="center"  v-if="visibleColumns.loBatchNumber" prop="​loBatchNumber" width="120" />
      <el-table-column label="库位" align="center" v-if="visibleColumns.location"  prop="location" width="120" />
      <el-table-column label="库区" align="center" v-if="visibleColumns.inventoryArea" prop="inventoryArea" width="120" />
      <el-table-column label="仓库名称" align="center" v-if="visibleColumns.warehouseName"  prop="warehouseName" width="180" />
      <el-table-column
        label="入库备注"
        align="center"
        prop="storageRemark"
        show-overflow-tooltip
        v-if="visibleColumns.storageRemark"
      />
      <el-table-column label="仓库状态" align="center" v-if="visibleColumns.inventoryStatus" prop="inventoryStatus" width="120" />
      <el-table-column label="库区状态" align="center" v-if="visibleColumns.areaStatus" prop="areaStatus" width="120" />
      <el-table-column label="库位状态" align="center" v-if="visibleColumns.localtionStatus" prop="localtionStatus" width="120" />
      <el-table-column
        label="物料备注"
        align="center"
        prop="materialRemark"
        show-overflow-tooltip
        v-if="visibleColumns.materialRemark"
      />
      <el-table-column label="创建人" v-if="visibleColumns.creator" align="center" prop="creator" width="120" />
      <el-table-column
        label="创建时间"
        align="center"
        prop="createTime"
        v-if="visibleColumns.createTime"
        :formatter="dateFormatter"
      />
      <el-table-column label="序列号" align="center" prop="serialNumber" v-if="visibleColumns.serialNumber" width="120" />
      <el-table-column label="更新人" align="center" v-if="visibleColumns.updater" prop="updater" width="120" />
      <el-table-column
        label="更新时间"
        align="center"
        prop="updateTime"
        v-if="visibleColumns.updateTime"
        :formatter="dateFormatter"
      />
    </el-table>
    <!-- 分页 -->
    <Pagination
      :total="total"
      v-model:page="queryParams.pageNo"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
  </ContentWrap>
  <!-- 自定义字段 -->
  <el-dialog v-model="dialogVisible" title="自定义字段" width="50%" :before-close="handleClose">
    <div class="content">
      <div class="content-list"
        ><el-checkbox v-model="tempVisibleColumns.materialId" label="物料编号" size="large"
      /></div>
      <div class="content-list"
        ><el-checkbox v-model="tempVisibleColumns.materialName" label="物料名称" size="large"
      /></div>
      <div class="content-list"
        ><el-checkbox v-model="tempVisibleColumns.materialCategory" label="物料分类" size="large"
      /></div>
      <div class="content-list"
        ><el-checkbox v-model="tempVisibleColumns.spec" label="规格" size="large"
      /></div>
      <div class="content-list"
        ><el-checkbox v-model="tempVisibleColumns.inventoryArea" label="库区" size="large"
      /></div>
      <div class="content-list"
        ><el-checkbox v-model="tempVisibleColumns.location" label="库位" size="large"
      /></div>
      <div class="content-list"
        ><el-checkbox v-model="tempVisibleColumns.model" label="物流型号" size="large"
      /></div>
      <div class="content-list"
        ><el-checkbox v-model="tempVisibleColumns.loBatchNumber" label="物流批次号" size="large"
      /></div>
      <div class="content-list"
        ><el-checkbox v-model="tempVisibleColumns.inventoryStatus" label="仓库状态" size="large"
      /></div>
      <div class="content-list"
        ><el-checkbox v-model="tempVisibleColumns.materialStatus" label="物料使用状态" size="large"
      /></div>
      <div class="content-list"
        ><el-checkbox v-model="tempVisibleColumns.areaStatus" label="库位状态" size="large"
      /></div>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleConfirm"> 确定 </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import { DICT_TYPE, getIntDictOptions, getStrDictOptions } from '@/utils/dict'
import { dateFormatter } from '@/utils/formatTime'
import * as RefundApi from '@/api/pay/refund'
import * as AppApi from '@/api/pay/app'
import download from '@/utils/download'
import type { TableColumnCtx } from 'element-plus'
defineOptions({ name: 'PayRefund' })

const message = useMessage() // 消息弹窗

const loading = ref(false) // 列表遮罩层
const total = ref(0) // 列表的总页数
const list = ref([]) // 列表的数据
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  materialId: undefined,
  materialCategory: undefined,
  warehouseName: undefined,
  warehouseArea: undefined,
  warehouseLocation: undefined,
  warehouse: undefined,
  loBatchNumber: undefined,
  model: undefined,
  spec: undefined,
  inventoryStatus: undefined,
  materialStatus: undefined,
  localtionStatus: undefined,
  storageRemark: undefined,
  supplierName: undefined,
  areaStatus: undefined,
  inventoryArea: undefined,
  location: undefined,
  Inventory: undefined,
  vendorName: undefined,
  channelOrderNo: undefined,
  channelRefundNo: undefined,
  createTime: [],
  updateTime: []
})
const queryFormRef = ref() // 搜索的表单
const exportLoading = ref(false) // 导出等待
const appList = ref([]) // 支付应用列表集合
const isExpanded = ref(false)
// 切换展开状态
const toggleExpand = () => {
  isExpanded.value = !isExpanded.value
}
const visibleColumns = ref({
  materialId: true,
  materialName: true,
  materialCategory: true,
  spec: true,
  inventoryArea: true,
  location: true,
  model: true,
  loBatchNumber: true,
  inventoryStatus: true,
  materialStatus: true,
  areaStatus: true
})
const dialogVisible = ref(false)
const tempVisibleColumns = ref({ ...visibleColumns.value })

const btnLie = () => {
  tempVisibleColumns.value = { ...visibleColumns.value }
  dialogVisible.value = true
}
const searchConfig = ref([
  {
    prop: 'materialId',
    placeholder: '请输入物料名称/编号',
    type: 'input',
    showInCollapsed: true
  },
  {
    prop: 'materialCategory',
    placeholder: '请输入物料分类',
    type: 'input',
    showInCollapsed: true
  },
  {
    prop: 'warehouse',
    placeholder: '请选择仓库',
    type: 'select',
    options: [{ label: '仓库A', value: 1 }],
    showInCollapsed: true
  },
  {
    prop: 'inventoryArea',
    placeholder: '请输入库区',
    type: 'input',
    showInCollapsed: true
  },
  {
    prop: 'location',
    placeholder: '请输入库位',
    type: 'input',
    showInCollapsed: true
  },
  {
    prop: 'Inventory',
    placeholder: '请选择可用库存',
    type: 'select',
    showInCollapsed: false
  },
  {
    prop: 'model',
    placeholder: '请输入物流型号',
    type: 'input',
    showInCollapsed: false
  },
  {
    prop: 'spec',
    placeholder: '请输入物流规格',
    type: 'input',
    showInCollapsed: false
  },
  {
    prop: 'supplierName',
    placeholder: '请输入供应商名称',
    type: 'input',
    showInCollapsed: false
  },
  {
    prop: '​loBatchNumber',
    placeholder: '请输入物流批次号',
    type: 'input',
    showInCollapsed: false
  },
  {
    prop: 'inventoryStatus',
    placeholder: '请选择仓库状态',
    type: 'select',
    showInCollapsed: false
  },
  {
    prop: 'materialStatus',
    placeholder: '请选择物料使用状态',
    type: 'select',
    showInCollapsed: false
  },
  {
    prop: 'localtionStatus',
    placeholder: '请选择库位状态',
    type: 'input',
    showInCollapsed: false
  },
  {
    prop: 'areaStatus',
    placeholder: '请选择库区状态',
    type: 'select',
    showInCollapsed: false
  },
  {
    prop: 'storageRemark',
    placeholder: '请输入入库备注',
    type: 'input',
    showInCollapsed: false
  },
  {
    prop: 'createTime',
    type: 'dateRange',
    startPlaceholder: '创建开始日期',
    endPlaceholder: '创建结束日期',
    showInCollapsed: false
  },
  {
    prop: 'updateTime',
    type: 'dateRange',
    startPlaceholder: '更新日期',
    endPlaceholder: '更新日期',
    showInCollapsed: false
  }
])

// 根据展开状态过滤显示的搜索项
const visibleSearchConfig = computed(() => {
  return searchConfig.value.filter((item) => isExpanded.value || item.showInCollapsed)
})
/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.pageNo = 1
  getList()
}

// 列表字段确认选择
const handleConfirm = () => {
  visibleColumns.value = { ...tempVisibleColumns.value }
  dialogVisible.value = false

  // 这里可以添加保存到本地存储的逻辑
  // localStorage.setItem('visibleColumns', JSON.stringify(visibleColumns.value))
}

// 模拟数据生成 (10条记录)
const generateMockData = () => {
  return [
    {
      materialId: 'MAT-00001',
      materialName: '集成电路',
      materialImage: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
      materialCategory: '电子元件',
      specification: 'IC-1234',
      category: 'A类',
      materialStatus: '在库',
      salePrice: 1999,
      costPrice: 1200,
      currentStock: 500,
      totalSalesAmount: 20000,
      totalCost: 15000,
      occupiedStock: 100,
      availableStock: 400,
      unit: '个',
      auxiliaryCurrentStock: 50,
      auxiliaryOccupiedStock: 10,
      auxiliaryAvailableStock: 40,
      subUnit: '盒',
      subUnitQuantity: 10,
      auxiliarySalePrice: 1900,
      auxiliaryCostPrice: 1150,
      loBatchNumber: 'BATCH-001',
      location: 'A-01',
      inventoryArea: '电子区',
      warehouseName: '上海主仓',
      storageRemark: '防静电包装',
      inventoryStatus: '正常',
      areaStatus: '可用',
      localtionStatus: '空闲',
      materialRemark: '敏感元件',
      creator: '张三',
      createTime: '2023-05-15T08:30:00',
      serialNumber: 'SN-1001',
      updater: '李四',
      updateTime: '2023-06-01T14:20:00'
    },
    {
      materialId: 'MAT-00002',
      materialName: '铝合金板',
      materialCategory: '金属材料',
      specification: 'AL-5052',
      category: 'B类',
      materialStatus: '出库中',
      salePrice: 4500,
      costPrice: 3800,
      currentStock: 200,
      totalSalesAmount: 30000,
      totalCost: 25000,
      occupiedStock: 50,
      availableStock: 150,
      unit: '千克',
      auxiliaryCurrentStock: 25,
      auxiliaryOccupiedStock: 5,
      auxiliaryAvailableStock: 20,
      subUnit: '捆',
      subUnitQuantity: 10,
      auxiliarySalePrice: 4400,
      auxiliaryCostPrice: 3750,
      loBatchNumber: 'BATCH-002',
      location: 'B-03',
      inventoryArea: '金属区',
      warehouseName: '广州分仓',
      storageRemark: '防潮处理',
      inventoryStatus: '盘点中',
      areaStatus: '可用',
      localtionStatus: '占用',
      materialRemark: '表面需保护',
      creator: '王五',
      createTime: '2023-04-10T10:15:00',
      serialNumber: 'SN-1002',
      updater: '赵六',
      updateTime: '2023-05-20T09:45:00'
    }
  ]
}

// 所有模拟数据
const allMockData = ref(generateMockData())

// 仓库选项
const warehouseOptions = ref([
  { label: '上海主仓', value: 1 },
  { label: '广州分仓', value: 2 },
  { label: '北京分仓', value: 3 },
  { label: '成都分仓', value: 4 }
])

// 配置条件搜索
searchConfig.value = [
  {
    prop: 'warehouse',
    placeholder: '请选择仓库',
    type: 'select',
    options: warehouseOptions.value,
    showInCollapsed: true
  },
  {
    prop: 'materialId',
    placeholder: '请输入物料名称/编号',
    type: 'input',
    showInCollapsed: true
  },
  {
    prop: 'materialCategory',
    placeholder: '请输入物料分类',
    type: 'input',
    showInCollapsed: true
  },
  {
    prop: 'inventoryArea',
    placeholder: '请输入库区',
    type: 'input',
    showInCollapsed: true
  },
  {
    prop: 'location',
    placeholder: '请输入库位',
    type: 'input',
    showInCollapsed: true
  },
  {
    prop: 'Inventory',
    placeholder: '请选择可用库存',
    type: 'select',
    showInCollapsed: false
  },
  {
    prop: 'model',
    placeholder: '请输入物流型号',
    type: 'input',
    showInCollapsed: false
  },
  {
    prop: 'spec',
    placeholder: '请输入物流规格',
    type: 'input',
    showInCollapsed: false
  },
  {
    prop: 'supplierName',
    placeholder: '请输入供应商名称',
    type: 'input',
    showInCollapsed: false
  },
  {
    prop: '​loBatchNumber',
    placeholder: '请输入物流批次号',
    type: 'input',
    showInCollapsed: false
  },
  {
    prop: 'inventoryStatus',
    placeholder: '请选择仓库状态',
    type: 'select',
    showInCollapsed: false
  },
  {
    prop: 'materialStatus',
    placeholder: '请选择物料使用状态',
    type: 'select',
    showInCollapsed: false
  },
  {
    prop: 'localtionStatus',
    placeholder: '请选择库位状态',
    type: 'input',
    showInCollapsed: false
  },
  {
    prop: 'areaStatus',
    placeholder: '请选择库区状态',
    type: 'select',
    showInCollapsed: false
  },
  {
    prop: 'storageRemark',
    placeholder: '请输入入库备注',
    type: 'input',
    showInCollapsed: false
  },
  {
    prop: 'createTime',
    type: 'dateRange',
    startPlaceholder: '创建开始日期',
    endPlaceholder: '创建结束日期',
    showInCollapsed: false
  },
  {
    prop: 'updateTime',
    type: 'dateRange',
    startPlaceholder: '更新日期',
    endPlaceholder: '更新日期',
    showInCollapsed: false
  }
]

/** 查询列表 */
const getList = async () => {
  loading.value = true

  try {
    // 使用setTimeout模拟API请求延迟
    await new Promise((resolve) => setTimeout(resolve, 300))

    // 过滤数据
    let filteredData = [...allMockData.value]

    // 物料名称/编号搜索 (模糊匹配)
    if (queryParams.materialId) {
      const searchTerm = queryParams.materialId.toLowerCase()
      filteredData = filteredData.filter(
        (item) =>
          item.materialId.toLowerCase().includes(searchTerm) ||
          item.materialName.toLowerCase().includes(searchTerm)
      )
    }

    // 物料分类搜索
    if (queryParams.materialCategory) {
      filteredData = filteredData.filter((item) =>
        item.materialCategory.includes(queryParams.materialCategory)
      )
    }

    // 仓库搜索
    if (queryParams.warehouse) {
      const warehouseOption = warehouseOptions.value.find(
        (opt) => opt.value === queryParams.warehouse
      )
      if (warehouseOption) {
        filteredData = filteredData.filter((item) => item.warehouseName === warehouseOption.label)
      }
    }

    // 库区搜索
    if (queryParams.inventoryArea) {
      filteredData = filteredData.filter((item) =>
        item.inventoryArea.includes(queryParams.inventoryArea)
      )
    }

    // 库位搜索
    if (queryParams.location) {
      filteredData = filteredData.filter((item) => item.location.includes(queryParams.location))
    }

    // 创建时间范围搜索
    if (queryParams.createTime && queryParams.createTime.length === 2) {
      const startDate = new Date(queryParams.createTime[0])
      const endDate = new Date(queryParams.createTime[1])

      filteredData = filteredData.filter((item) => {
        const createDate = new Date(item.createTime)
        return createDate >= startDate && createDate <= endDate
      })
    }

    // 物料状态搜索
    if (queryParams.materialStatus) {
      filteredData = filteredData.filter(
        (item) => item.materialStatus === queryParams.materialStatus
      )
    }

    // 分页处理
    const startIndex = (queryParams.pageNo - 1) * queryParams.pageSize
    const endIndex = startIndex + queryParams.pageSize
    const pageData = filteredData.slice(startIndex, endIndex)

    list.value = pageData
    total.value = filteredData.length
  } catch (error) {
    console.error('获取数据失败:', error)
    message.error('获取数据失败，请重试')
  } finally {
    loading.value = false
  }
}

// 其他方法保持原样（handleQuery, resetQuery等）...

/** 初始化 **/
onMounted(async () => {
  // 获取应用列表（如果不需要可以移除）
  // appList.value = await AppApi.getAppList();

  // 加载模拟数据
  await getList()
})
/** 查询列表 */
// const getList = async () => {
//   loading.value = true
//   try {
//     const data = await RefundApi.getRefundPage(queryParams)
//     list.value = data.list
//     total.value = data.total
//   } finally {
//     loading.value = false
//   }
// }

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value?.resetFields()
  handleQuery()
}

/** 导出按钮操作 */
const handleExport = async () => {
  try {
    // 导出的二次确认
    await message.exportConfirm()
    // 发起导出
    exportLoading.value = true
    const data = await RefundApi.exportRefund(queryParams)
    download.excel(data, '物料库存.xls')
  } catch {
  } finally {
    exportLoading.value = false
  }
}

/** 预览详情 */
const detailRef = ref()
const openDetail = (id: number) => {
  detailRef.value.open(id)
}

interface Product {
  currentStock: number
  totalSalesAmount: number
  totalCost: number
  occupiedStock: number
  availableStock: number
}
interface SummaryMethodProps<T = Product> {
  columns: TableColumnCtx<T>[]
  data: T[]
}

const getSummaries = (param: SummaryMethodProps) => {
  const { columns, data } = param
  const sums: (string | VNode)[] = []
  columns.forEach((column, index) => {
    if (index === 0) {
      sums[index] = h('div', { style: { textDecoration: 'none' } }, ['合计'])
      return
    }
    const values = data.map((item) => Number(item[column.property]))
    if (!values.every((value) => Number.isNaN(value))) {
      sums[index] = ` ${values.reduce((prev, curr) => {
        const value = Number(curr)
        if (!Number.isNaN(value)) {
          return prev + curr
        } else {
          return prev
        }
      }, 0)}`
    } else {
      sums[index] = ''
    }
  })

  return sums
}

/** 初始化 **/
onMounted(async () => {
  await getList()
  appList.value = await AppApi.getAppList()
})
</script>
<style  scoped>
:deep(.el-table__footer-wrapper tfoot td) {
  background-color: #fff3e0;
}
.expand-toggle-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  font-size: 12px;
  color: #909399;
}
.order-font {
  padding: 2px 0;
  font-size: 12px;
}
</style>
